<template>
	<view class="template-read tn-safe-area-inset-bottom">
	<tn-nav-bar fixed :bottomShadow="false">
		<text class="">我报名的活动</text>
	
	</tn-nav-bar>


		<view class="tn-margin-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			
	
	

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
			<view class="  tn-padding-bottom">
				<goodslist :list="content" :index="true"></goodslist>

			</view>
		</mescroll-body>
		<!-- 比例 end-->
		<!-- <view class="tn-fab-class tn-fab" 
			@click="navigateToFn({ url: '/circleMixinPages/reserve_my', checkLogin: true })">
			<view class="tn-fab__box tn-fab--right" style="left: auto; right: 20px; bottom: 160px; z-index: 19060;">
				<view data-v-710e8188="" class="tn-fab__item__btn tn-fab__item__btn--fab " :class="configInfo.share"
					style="width: 44px; height: 44px; border-radius: 50%; z-index: 19059;">
					<view class="tn-fab__item__btn__icon tn-icon-team" style="font-size: 20px;">
						<view style="font-size: 12px;">
							我的
						</view>
					</view>
				</view>
			</view>
		</view> -->
	

		<view class="tn-padding-xl"></view>
	</view>
	</view>
</template>

<script>
	import goodslist from '@/circleMixinPages/goods-task.vue';
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
import { render } from "vue";
	export default {
		name: 'TemplateRead',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			NavIndexButton,		
			goodslist,
			MescrollBody
		},
		data() {
			return {
				fenindex:0,
				body:[],
				themeColor: '#000000',
				filterResult: '',
				menuList: [{
						'title': '状态',
						'detailTitle': '',
						'isMutiple': false,
						'key': 'jobType',
						'detailList': [{
								'title': '全部',
								'value': ''
							},
							{
								'title': '报名中',
								'value': '1'
							},
							{
								'title': '进行中',
								'value': '2'
							},
							{
								'title': '已结束',
								'value': '3'
							},
						]

					},
					{
						'title': '类型',
						'key': 'salary',
						'isMutiple': false,
						'detailTitle': '请选择活动类型',
						'detailList': []

					},				
					{
						'title': '排序',
						'key': 'sort',
						'isSort': true,
						'detailList': [{
								'title': '默认排序',
								'value': ''
							},
							{
								'title': '时间优先',
								'value': 'add_time'
							},
							{
								'title': '人气优先',
								'value': 'wages_up'
							},
							{
								'title': '离我最近',
								'value': 'location'
							}
						]
					}
				],
				riqiid: 0,
				list: [],
				searchKey: '',
				cardCur: 0,
				swiperList: [],
				content: [],
				iconnew: [],
				rilist: [],
				gonggao: ['某某参加了活动，你也来参加吧'],
				filterResult: [],
				status:'',
				leixing:'',
				quyu:'',
				paixu:'',
				quan_id:0
				
			}
		},
		onLoad(option) {
		
		},
		methods: {
			fabuhuodng() {
				this.navigateToFn({
					url: '/homeMixinPages/huodong/add',
					checkLogin: true
				})
			},
			change(e){
				console.log(e)
				this.fenindex=e.index
				this.mescroll.resetUpScroll();
				
			},
		

			/// 列表调用
			downCallback(mescroll) {
				mescroll.endSuccess();
				mescroll.resetUpScroll();
			},

			async upCallback(mescroll) {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/index/allActiveList_my',
					data: {					
						page: mescroll.num
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						if (mescroll.num == 1) {

							that.content = result.data.data.data;
						} else {
							that.content = that.content.concat(result.data.data.data);
						}
						mescroll.endSuccess(result.data.data.data.length, result.data.data.data.length >= mescroll
							.size);

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},


			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
				this.status=val.jobType				
				this.leixing=val.salary	
				this.quyu=val.single	
				this.paixu=val.sort	
				if (this.paixu=='location'){
					this.dingwei()
					return
				}
				this.mescroll.resetUpScroll();
			},
			
			dingwei(){
					let that = this
						// #ifdef APP-PLUS||H5				
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: function(res) {
								uni.setStorageSync('latlng', res)
								console.log(res)
								that.mescroll.resetUpScroll();
							},
							fail: function(res) {				
								console.log(res)
								this.msg('定位错误')
							}
						});
						// #endif
				
						// #ifdef MP		
						wx.getFuzzyLocation({
							type: 'wgs84',
							success(res) {
								uni.setStorageSync('latlng', res)
								that.mescroll.resetUpScroll();				
							},
							fail: function(res) {
								console.log(res)
								this.msg('定位错误')
							}
						})
						// #endif				
				},
			

			riqi() {
				const today = new Date();
				const dates = [];
				for (let i = 1; i < 7; i++) {
					const day = new Date(today);
					day.setDate(today.getDate() + i);
					const dateString = day.toISOString().split('T')[0];
					const riqi = dateString.slice(5, 7) + '/' + dateString.slice(8, 10)
					dates.push(riqi);
				}
				this.rilist = dates

			},

			qiehuanriqi(index) {
				this.riqiid = index + 1
				this.mescroll.resetUpScroll();
			},

			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},


			sousuo() {

				if (this.searchKey == '') {
					this.msg('请输入关键词')
					return
				}
				uni.navigateTo({
					url: '/shopPages/list?searchKey=' + this.searchKey
				})
			},


			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footerfixed {
		position: fixed;
		// margin: 20rpx;
		margin: 40rpx 5%;
		width: 90%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;
		//	background-image: repeating-linear-gradient(-45deg, #fbf7ac69, #fff20014);
		color: #080808;


		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 80%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				color: #AAAAAA;
			}
		}
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 20px;
			padding: 4px 8px;
			margin: 0px 2px;

			&--prefix {
				padding-right: 6rpx;
			}
		}
	}
	
	.tn-fab {
		&__box {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			position: fixed;
			transition: all 0.25s ease-in-out;
		}
	
		&--right {
			align-items: flex-end;
		}
	
		&__btns {
			transition: all 0.25s cubic-bezier(0, .13, 0, 1.43);
			transform-origin: 80% bottom;
	
			&__animation--up {
				opacity: 0;
				transform: translateY(100%);
			}
	
			&__animation--around {
				position: absolute;
				top: 0;
				left: 0;
			}
	
			&--visible--up {
				// visibility: visible;
				opacity: 1;
				transform: translateY(0);
			}
	
			&--visible--around {
				// visibility: visible;
				// opacity: 1;
			}
		}
	
		&__item {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-bottom: 20rpx;
	
			&__animation--around {
				position: absolute;
				top: 0;
				left: 0;
				transition: transform 0.25s ease-in-out;
				transform-origin: 50% 50%;
				padding-bottom: 0 !important;
			}
	
			&--left {
				flex-flow: row-reverse;
			}
	
			&__text {
				&--left {
					padding-left: 14rpx;
				}
	
				&--right {
					padding-right: 14rpx;
				}
			}
	
			&__btn {
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.07);
				transition: all 0.2s linear;
	
				&--active {
					animation-name: fab-button-animation;
					animation-duration: 0.2s;
					animation-timing-function: cubic-bezier(0, .13, 0, 1.43);
				}
	
				&__title {
					width: 90%;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
	
				&__icon {
					text-align: center;
					font-size: 64rpx;
				}
	
				&__image {
					display: block;
				}
			}
		}
	
		&__mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: $tn-mask-bg-color;
			transition: all 0.2s ease-in-out;
			opacity: 0;
	
			&--visible {
				opacity: 1;
			}
		}
	}
</style>